<template>
	<view class="content">
		<view class="top-box flexWrapNo">
			<view class="left-box flexWrapNo">
				<view class="head-box">
					<image :src="info.a_avatar" v-if="info.a_avatar"></image>
					<image src="../../static/appointment/person-icon.png" v-else></image>
				</view>
				<view class="name-lable">{{info.a_nickname||""}}</view>
			</view>
			<view class="vs-box flexWarpCenterColumn">
				<image src="../../static/appointment/vs-icon.png" class="vs-icon"></image>
				<view class="vs-status" :class="{green:info.appointment_status==10,blue:info.appointment_status>=25,grey:info.appointment_status==20}">
					<block v-if="info.appointment_status==1||info.appointment_status==0">待应约</block>
					<block v-if="info.appointment_status==10">已约成</block>
					<block v-if="info.appointment_status==15">爽约</block>
					<block v-if="info.appointment_status==20">未约成</block>
					<block v-if="info.appointment_status==25">开台中</block>
					<block v-if="info.appointment_status==30">确认比分</block>
					<block v-if="info.appointment_status==40">已完成</block>
					<block v-if="info.appointment_status==45">已取消</block>
				</view>
			</view>
			<view class="right-box flexWrapNo">
				<view class="name-lable">{{info.b_nickname||""}}</view>
				<view class="head-box">
					<image :src="info.b_avatar" v-if="info.b_avatar"></image>
					<image src="../../static/appointment/person-icon.png" v-else></image>
				</view>
			</view>
		</view>
		<view class="chat-box flexWrapNo">
			<image src="../../static/appointment/chat-icon.png" class="chat-icon"></image>
			{{info.leave_message||'加载中...'}}
		</view>
		<view class="shop-info">
			<view class="info-top flexWrap">
				<view class="shop-name-box flexWrapNo">
					<view class="shop-name">{{info.shop_name||'加载中...'}}</view>
					<view class="shop-status">{{info.store_status_data||'加载中...'}}</view>
				</view>
				<view class="navigation-box flexWrapNo" @tap="navigation()">
					<!-- <image src="../../static/appointment/addres-icon.png" class="navigation-icon"></image> -->
					<text>导航</text>
				</view>
			</view>
			<view class="address-info flexWrap">
				<text>{{info.location||'暂无'}}</text>
				<text style="flex: none;">距你{{info.distance||'0'}}km</text>
			</view>
		</view>
		<view class="info-box">
			<view class="info-item flexWrapNo">
				<text class="info-title">桌台:</text>
				<text>{{info.shop_name||'加载中...'}}-{{info.equipment_name}}</text>
			</view>
			<view class="info-item flexWrapNo">
				<text class="info-title">预约时间:</text>
				<text>{{info.selected_time||'加载中...'}}</text>
			</view>
			<view class="info-item flexWrapNo">
				<text class="info-title">桌台类型:</text>
				<text>{{info.table_type||'加载中...'}}</text>
			</view>
			<view class="info-item flexWrapNo">
				<text class="info-title">约球类型:</text>
				<text>{{info.about_ball_type||'加载中...'}}</text>
			</view>
			<view class="info-item flexWrapNo">
				<text class="info-title">邀约段位:</text>
				<text>{{info.rank||'加载中...'}}</text>
			</view>
			<view class="info-item flexWrapNo" v-if="info.coupon_id">
				<text class="info-title">其他:</text>
				<text>{{info.gifts_coupon}}</text>
			</view>
			<view class="info-item flexWrapNo">
				<text class="info-title">发起人: </text>
				<text v-if="info.admin_id">{{info.admin_name }}</text>
				<text v-else>{{info.a_nickname}}</text>
			</view>
		</view>
		<view class="exeplan-box">
			<view>约球说明：</view>
			<view>1、抢台费为败者付台费，平台先预收双方台费，结束后，双方认可比赛结果，系统自动退费给胜者。</view>
			<view>2、取消预约：一旦应约，不可取消。如确实因不可抗因素无法应约，请联系店长处理。（店长电话：<text @tap="makePhoneCall"> {{info.customer_service_mobile}}</text>）</view>
			<view>3、争议解决：对于比赛结果有争议的，可以申请平台仲裁，以最终平台判定结果为准。</view>
		</view>
		<!-- <view class="bottom-box flexWrapNo" v-if="(info.appointment_status==1||info.appointment_status==0)&&user_id!=info.party_a">
			<view class="define-btn" @tap="goPage('/pages/appointment/confirmOrder?id='+id)">我要应约</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:"",
				longitude:"106.540541",
				latitude:"29.590991",
				info:{},
				user_id:""
			};
		},
		onLoad(ops) {
			this.id=ops.id
			this.getLocation();
			this.user_id=uni.getStorageSync('user_id')
		},
		methods:{
			// 获取经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res)
						that.longitude=res.longitude
						that.latitude=res.latitude
						that.getInfo();
					},
					fail(res) {
						that.$tools.showToast('请打开GPS后下拉刷新')
					}
				});
			},
			getInfo(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$request.post(this.$api.appointmentDetails, {
					longitude: this.longitude,
					latitude:this.latitude,
					id:this.id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.info=data
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 导航
			navigation() {
				let latitude = this.info.latitude;
				let longitude =  this.info.longitude;
				let name = this.info.shop_name;
				let address = this.info.location;
				if (!latitude || !longitude || !name) {
					uni.showToast({
						title: '打开地图失败,该地址无法查询到',
						duration: 2000,
						icon: 'none'
					});
					console.log(latitude)
					console.log(longitude)
					console.log(name)
					return;
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: name,
					address: address,
					fail: res => {
						console.log(res);
						uni.showModal({
							content: '打开地图失败,该地址无法查询到'
						});
					}
				});
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				if(!that.info.customer_service_mobile){
					this.$tools.showToast('暂无客服电话')
					return;
				}
				uni.makePhoneCall({
					phoneNumber:that.info.customer_service_mobile
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 32upx;
		padding-bottom: 120upx;
	}
	.shareTips{
		width: 376upx;
		height: 74upx;
		position: fixed;
		top: 0;
		right: 44upx;
	}
	.top-box{
		background: linear-gradient(141deg, #8D2639 0%, #121EAF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 30upx 28upx 30upx 28upx;
		.left-box{
			.head-box{
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				margin-right: -42upx;
				z-index: 9;
				overflow: hidden;
			}
			.name-lable{
				width: 173rpx;
				height: 56rpx;
				padding-left: 54upx;
				background: url('../../static/appointment/leftBg.png') no-repeat center /100% 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
				@include ellipsis(1);
			}
		}
		.vs-box{
			.vs-icon{
				width: 112upx;
				height: 112upx;
			}
			.vs-status{
				width: 108rpx;
				height: 40rpx;
				line-height: 40upx;
				text-align: center;
				background: #772622;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				border: 2rpx solid #EB564F;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: -25upx;
			}
			.grey{
				color: #5250AA;
				background: #19185E;
				border: 2rpx solid #5250AA;
			}
			.green{
				background: #1C573B;
				border: 2rpx solid #53A33A;
			}
			.blue{
				background: #2263AC;
				border: 2rpx solid #0AD2E6;
			}
		}
		.right-box{
			.head-box{
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				margin-left: -42upx;
				z-index: 9;
				overflow: hidden;
			}
			.name-lable{
				width: 173rpx;
				height: 56rpx;
				padding-right: 54upx;
				background: url('../../static/appointment/rightBg.png') no-repeat center /100% 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
				@include ellipsis(1);
			}
		}
	}
	.chat-box{
		padding: 20upx 28upx;
		background: #1C1B5B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #343383;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
		position: relative;
		align-items: start;
		::after{
			content: "";
			width: 0;
			height: 0;
			border-left: 28upx solid transparent;  
			border-right: 28upx solid transparent;  
			border-bottom: 38upx solid #1C1B5B; 
			display: inline-block;
			position: absolute;
			border-radius: 4upx;
			top: -40upx;
			left: 36upx;
		}
		.chat-icon{
			width: 40upx;
			height: 40upx;
			flex: none;
			margin-right: 12upx;
		}
	}
	.shop-info{
		margin-top: 28upx;
		background: #353484;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 28upx;
		.info-top{
			.shop-name-box{
				.shop-name{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 50upx;
					color: #FFFFFF;
				}
				.shop-status{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 108upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					background: #2CA522;
					border-radius: 36upx;
					margin-left: 24upx;
				}
			}
			.navigation-box{
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 36upx;
				color: #FFB726;
				.navigation-icon{
					width: 36upx;
					height: 36upx;
					margin-right: 8upx;
				}
			}
		}
		.address-info{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #999999;
			margin-top: 14upx;
			align-items: baseline;
		}
	}
	.info-box{
		padding: 32upx 28upx;
		background: #1D1C5C;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 4upx;
		.info-item{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 56rpx;
			.info-title{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #8E8DAD;
				line-height: 36rpx;
				min-width: 102upx;
				margin-right: 24upx;
				text-align: right;
			}
		}
	}
	.exeplan-box{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #82819B;
		margin-top: 48upx;
		line-height: 40upx;
	}
.bottom-box{
		height: 120rpx;
		background: #1D1C5C;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		.define-btn{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			width: 322rpx;
			height: 80rpx;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
		}
	}
</style>
